<title>徽章</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">徽章</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">徽章</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Basic Badges start -->
<section id="basic-badges">
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Primary Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-primary</code>class within element to create primary badge.</p>
						<div class="badge badge-primary">Primary Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Secondary Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-secondary</code>class within element to create secondary badge.</p>
						<div class="badge badge-secondary">Secondary Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Success Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-success</code>class within element to create success badge.</p>
						<div class="badge badge-success">Success Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Danger Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-danger</code>class within element to create danger badge.</p>
						<div class="badge badge-danger">Danger Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Warning Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-warning</code>class within element to create warning badge.</p>
						<div class="badge badge-warning">Warning Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Info Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-info</code>class within element to create info badge.</p>
						<div class="badge badge-info">Info Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Light Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-light</code>class within element to create light badge.</p>
						<div class="badge badge-light">Light Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Dark Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-dark</code>class within element to create dark badge.</p>
						<div class="badge badge-dark">Dark Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Custom Pink Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.bg-pink</code>class within element to create pink badge.</p>
						<div class="badge bg-pink">Custom Pink Badge</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Basic Badges end -->


<!-- Badges with Only Icons start -->
<section id="badges-with-only-icons">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Icons Badges</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Square Icon Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-square</code>class to square bordered badge.</p>
						<div class="badge badge-primary badge-square">
						<i class="font-medium-2 icon-line-height ft-activity"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Secondary Icon Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-secondary</code>class within element to create secondary badge.</p>
						<div class="badge badge-secondary">
						<i class="font-medium-2 icon-line-height ft-award"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Round Icon Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.round</code> class for round warning badge.</p>
						<div class="badge badge-success round">
						<i class="font-medium-2 icon-line-height ft-bookmark"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Danger Icon Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-danger</code>class within element to create danger badge.</p>
						<div class="badge badge-danger">
						<i class="font-medium-2 icon-line-height ft-command"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Square Icon Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-square</code> class to square bordered badge.</p>
						<div class="badge badge-info badge-square">
						<i class="font-medium-2 icon-line-height ft-droplet"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Round Icon Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.round</code> class for round warning badge.</p>
						<div class="badge badge-warning round">
						<i class="font-medium-2 icon-line-height ft-film"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Badges with Only Icons end -->



<!-- Bordered Badges start -->
<section id="bordered-badges">
	<div class="row">
		<div class="col-12 mt-1">
			<h4 class="text-uppercase">Bordered Badges</h4>
			<p>Use the <code>.badge-bordered</code> with class <code>.badge</code>. Also use <code>.border-COLOR</code> class to add border and use <code>.COLOR</code> for text color </p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Primary Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-primary primary badge-border">Primary Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Danger Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-danger danger badge-border">Danger Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Success Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-success success badge-border">Success Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Info Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-info info badge-border">Info Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Warning Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-warning warning badge-border">Warning Badge</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Custom Color Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-pink pink badge-border">Custom Color Badge</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Bordered Badges end -->


<!-- Bordered Icon Badges start -->
<section id="bordered-icon-badges">
	<div class="row">
		<div class="col-12 my-1">
			<h4 class="text-uppercase">Bordered Icon badges</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Default Primary Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-primary primary badge-border">
							<i class="font-medium-2 icon-line-height ft-hash"></i> 
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Round Danger Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-danger danger round badge-border">
							<i class="font-medium-2 icon-line-height ft-speaker"></i> 
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Square Success Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-success success badge-square badge-border">
							<i class="font-medium-2 icon-line-height ft-headphones"></i> 
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Default Info Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-info info badge-border">
							<i class="font-medium-2 icon-line-height ft-link"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Square Warning Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-warning warning badge-square badge-border">
						<i class="font-medium-2 icon-line-height ft-layers"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Round Custom Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge border-pink pink round badge-border">
							<i class="font-medium-2 icon-line-height ft-package"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Bordered Icon Badges end -->

<!-- Badges With Links start -->
<section id="badges-with-links">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Badges With Links</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-3 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Secondary Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge badge-secondary">
							<a href="#">Link Badge</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Success Badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge badge-primary">
						<a href="#"><i class="icon-line-height ft-radio font-medium-2"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>		
		<div class="col-lg-3 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Danger Tag</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge badge-border border-danger">
							<a href="#" class="danger">Link Tag</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4>Warning Tag</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge badge-border border-warning round">
							<a href="#" class="warning">
							<i class="icon-line-height ft-shopping-cart font-medium-2"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Badges With Links end -->
</div>

<script type="text/javascript">
	
</script>